<template>
  <div class="w-screen stick top-7 left-0 z-10">
    <ul
      class="w-[800px] rounded-sm bg-white/10 dark:bg-white/10 backdrop-blur-lg duration-200 overflow-hidden mx-auto relative justify-center overflow-x-auto px-[-10px] py-1 dark:bg-zinc-900 text-xs"
      :class="[useNavigationStore.isOpenNavigation ? 'h-[220px]' : 'h-[60px]']"
    >
      <div
        @click="isOpenCategory"
        class="absolute right-1 bottom-1 z-20 p-1 rounded cursor-pointer dark:bg-zinc-300 duration-200 hover:bg-blue-200 dark:hover:bg-zinc-200"
      >
        <My-svg-icon
          :class="[
            'transform transition-transform duration-500  ease-in-out',
            useNavigationStore.isOpenNavigation
              ? 'rotate-180 w-1 h-1 text-blue-300 dark:text-white'
              : 'rotate-0 w-1 h-1 text-blue-300 dark:text-white'
          ]"
          name="unfold"
        >
        </My-svg-icon>
      </div>
      <div class="flex flex-wrap mt-1">
        <li
          v-for="(item, index) in useNavigationStore.Navigation"
          :key="item.id"
          class="shrink-0 px-1.5 py-0 z-10 duration-200 text-zinc-800 dark:text-zinc-400 text-base font-medium h-4 leading-4 cursor-pointer rounded-sm mr-1 mb-1 hover:bg-zinc-500"
        >
          {{ item.category }}
        </li>
      </div>
    </ul>
  </div>
</template>

<script setup>
import useNavigation from '@/store/navigation/index.js'
import { useDebounceFn } from '@vueuse/core'
const useNavigationStore = useNavigation()
useNavigationStore.getNavigationData()
const isOpenCategory = useDebounceFn(() => {
  useNavigationStore.changeDesktopNavigationStatus()
}, 300)
</script>

<style lang="scss" scoped>
.bg-white {
  background-color: #ffffff;
}
.text-gray-700 {
  color: #7a7a7a;
}
.text-blue-700 {
  color: #0088cc;
}
.bg-gray-100 {
  background-color: #f5f5f5;
}
.hover\:bg-blue-50:hover {
  background-color: #e3f2fd;
}
.hover\:bg-gray-100:hover {
  background-color: #e6e6e6;
}
</style>
